<template>
	<view class="pages">
		<view class="res-box">
			<rich-text :nodes="strings"></rich-text>
			<image class="edit-img" :src="url" mode="widthFix"></image>
		</view>
		<uni-popup :is-mask-click="false" @close="close" @open="open" ref="payPopup" type="center">
			<view class="pop-box">
				<sign @save="confirm"/>
			</view>
		</uni-popup>
		<view class="buttons">
			<view class="toEdit" @click="open">签名</view>
			<!-- <view class="buttons-sure" v-else>
				<view class="toEdit clear" @click="open">重写签名</view>
				<view class="toEdit" @click="confirmTo">确认签名</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {baseUrl} from "@/utils/config.js"
	import sign from "@/components/sign/sign.vue"
	export default {
		components:{sign},
		data() {
			return {
				showEdit: false,
				width: 0,
				height: 0,
				strings:"",
				url:"",
			};
		},
		onLoad() {
			const winds = uni.getWindowInfo();
			this.width = winds.screenWidth * 0.9;
			this.getPdf()
		},
		methods: {
			async getPdf() {
				let {data:res} = await this.$api("/app/getAgreement","GET",{code:"open_agreement"})
				console.log(res)
				this.strings = res.data
			},
			confirm(datas) {
				    // console.log('保存图片的地址', datas)
					this.url = datas.tempFilePath
					const token = uni.getStorageSync('token')||""
					uni.uploadFile({
						url: baseUrl+'/app/upload',
						filePath: datas.tempFilePath,
						name:'file',
						header: {
							'Authorization':token?'Bearer '+token:'',
						}, 
						success: async (uploadFileRes) => {
							const res = JSON.parse(uploadFileRes.data)
							console.log(res)
							if(res.code==200){
								this.url = res.data.url
								this.close()
								let {data:sure} = await this.$api("/app/user/signAgreement","POST",{signData:this.url})
								// console.log(sure)
								if(sure.code==200){
									let users = this.$store.state.userInfo
									users.signState=true
									this.$store.dispatch('setUserData',users)
									uni.reLaunch({
										url:"/pages/index/index"
									})
								}else{
									uni.showToast({
										icon:"none",
										title:sure.msg
									})
									setTimeout(()=>{
										uni.reLaunch({
											url:"/pages/index/index"
										})
									},400)
								}
							}else if(res.code==401){
								uni.showToast({
									icon:"none",
									title:"登录失效"
								})
								setTimeout(()=>{
									uni.navigateTo({
										url:"/pages/login/login"
									})
								},1000)
							}
						}
					});
			},
			clear() {
				this.$refs.cavs.init()
			},
			open() {
				this.$refs.payPopup.open()
			},
			close() {
				this.$refs.payPopup.close()
			}
		}
	}
</script>

<style lang="scss">
	.pages{
		padding-bottom:calc(90rpx+ constant(safe-area-inset-bottom)); //兼容 IOS<11.2
		padding-bottom:calc(90rpx + env(safe-area-inset-bottom)); //兼容 IOS>11.2;
	}
	.res-box{
		width: 100vw;
		position: relative;
		padding: 10rpx;
		.edit-img{
			width: 200rpx;
			position: absolute;
			bottom: 0rpx;
			left: 80px;
		}
	}
	.pop-box {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	.buttons {
		width: 100vw;
		height: calc(70rpx + constant(safe-area-inset-bottom)); //兼容 IOS<11.2
		height: calc(70rpx + env(safe-area-inset-bottom)); //兼容 IOS>11.2
		position: fixed;
		display: flex;
		bottom: 0rpx;
		left: 0;
		.buttons-sure{
			height: 100%;
			width: 100%;
			display: flex;
		}
		.toEdit{
			flex: 1;
			height: 100%;
			color: #fff;
			font-size: 40rpx;
			background-color: #529AEE;
			font-weight: bold;
			border-radius: none;
			line-height: calc(70rpx + constant(safe-area-inset-bottom));
			line-height: calc(70rpx + env(safe-area-inset-bottom));
			text-align: center;
		}
		.clear{
			background-color: red;
			
		}
	}
</style>